const box = document.querySelector('.main > .box')
const showBox = document.querySelector('.main > .box > .show')
const listBox = document.querySelector('.main > .box > .list')
const enlargeBox = document.querySelector('.main > .box > .enlarge')
const rightBox = document.querySelector('.main > .box > .right')
const goodsId = window.sessionStorage.getItem('goodsId')
console.log(goodsId)
const item = {
    itemId: `${goodsId}`,
}
getList()
async function getList() {
    let info = {
        itemId: `${goodsId}`,
    }
    const res = await $.ajax({ url: '/detail', data: info, dataType: 'json' })
    console.log(res)

    bindBig(res.data.itemInfo.imgContent[0])
    bindSmall(res.data.itemInfo.imgContent)
    bindEn(res.data.itemInfo.imgContent[0])
    bindRight(res.data)
}
function bindBig(list) {
    let str = ''
    str = `
 <img src="${list}" alt="">
 <div class="mask"></div>
 `
    showBox.innerHTML = str
}
function bindSmall(list) {
    list.forEach((item) => {
        const str = `
<img class="active" src="${item}" data-show="${item}" data-enlarge="${item}">
`
        listBox.innerHTML += str
    })
}
function bindEn(list) {
    let str = ''
    str = `
<img src="${list}" alt="">
`
    enlargeBox.innerHTML = str
}
listBox.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        showBox.firstElementChild.src = e.target.dataset.show
        enlargeBox.firstElementChild.src = e.target.dataset.enlarage
    }
})
function bindRight(list) {
    console.log(list)
    const str = `
<p class="title">${list.itemInfo.title}</p >
<p class="summary">${list.itemInfo.summary}</p>
<div class="info">
<p>价 格:
<span class="price">￥${list.itemInfo.priceSale}</span>
<span class="old-price">￥${list.itemInfo.priceMarket}</span>
</p >
<p>领 券:
<span class="coup">${list.coupons}</span> 
</p >
<button class="cartBtn">加入购物车</button>
<button>立即购买</button>
</div>
`
    rightBox.innerHTML = str
}
